歐陽克是誰殺的?

這個this是誰？要看兇手是誰而定！

前面有提到，這個e是在當事件發生時，事件處理器自動建立的「事件物件」，裡面紀錄了跟事件有關係的資訊，並把這個e當參數傳入事件發生時設定要執行的函式。

如果我們想要印出，滑鼠所點擊的元素的標籤名稱，可以這樣寫：

element.addEventListener('click', function (e){
	console.log(e.target.tagName);
},false)

「e.target」就是「觸發事件的元素」。在這種狀況下，我們可以使用「this」來取代 「e.target」。

當我們選取DOM元素來做事件監聽的時候，this會指向那個DOM元素。以下這段程式，滑鼠點擊之後，字體會變成紅色的。

<div id="sword">
  <ul class="fiveHero">
    <li class="firstHero">1 東邪</li>
    <li class="secondHero">2 西毒</li>
    <li class="thirdHero">3 南帝</li>
    <li class="fifthHero">4 北丐</li>
    <li class="lastHero">5 中神通</li>
  </ul>
</div>

var elements = document.getElementsByTagName('li');

function changeColor(e) {
	console.log(e.target);
  e.target.style.color = 'red';
}

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', changeColor, false);
}

我們用「this」來取代「e.target」，跟上面那個JavaScript程式區塊呈現一樣的效果。

var elements = document.getElementsByTagName('li');
//沒有用e當function的參數
function changeColor() {
	console.log(this);
  this.style.color = 'red';
}

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', changeColor, false);
}

但是當「事件監聽」是被其他元素的事件所觸發的時候，「this」就不等於「e.target」了。來看看下面的例子：

<div class="outer">
    <div class="inner"></div>
</div>

var inner = document.querySelector('.inner')
var outer =document.querySelector('.outer');
inner.addEventListener('click', function(e) {
  console.log(e.target.className,1)
  console.log(this.className,1)
},false)

outer.addEventListener('click', function(e){
    console.log(e.target.className,2)
    console.log(this.className,2)
},false)

點擊黃色區塊後，出來的結果是：

"inner" 1  //黃色區塊所觸發的事件,e.targer = 觸發事件的元素
"inner" 1  //黃色區塊所觸發的事件,e.target = this = 觸發事件的元素
"inner" 2  //黃色區塊事件冒泡所觸發的事件 , e.target = 觸發事件的元素
"outer" 2  //黃色區塊事件冒泡觸發紅色區塊的事件， this = 被事件冒泡所觸發的元素，而非e.target

在這個例子中，outer.addEventListener() 是被 inner.addEventListener() 的事件冒泡所觸發，e.target為觸發事件的元素，真正的凶手當然就是inner。而outer.addEventListener()的this卻是指向outer，它是被事件冒泡所觸發的元素，也就是e.currentTarget，也就是被害者，被inner害的。

在沒有事件冒泡影響的情況下，e.target = this，兇手與被害者是同一人，也就是自作自受。

當元素的事件是被事件冒泡所觸發的時候：

e.target 是兇手，郎是伊抬ㄟ！

e.currentTarget 就是被害者！this 就是 e.currentTarget！也就是被事件冒泡影響所觸發的元素。

歐陽克是被楊康殺的！

咦！